<!-- 菜单管理 -->
<template>
  <div>
    <div class="cardBody">
      <el-radio-group
        v-model="tabPosition"
        @input="radioChange"
        size="small"
        style="margin-bottom: 15px"
      >
        <el-radio-button label="100000002">App菜单</el-radio-button>
        <el-radio-button label="100000001">Pc菜单</el-radio-button>
      </el-radio-group>

      <div style="max-height: 550px; min-height: 250px; overflow: auto">
        <el-tree
          v-loading="loading"
          ref="tree"
          :data="menuList"
          :props="defaultProps"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          style="width: 450px"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>

            <span>
              <el-button type="text" size="mini" @click="edit(node, data)">
                修改
              </el-button>
            </span>
          </div>
        </el-tree>
      </div>
    </div>

    <edu-dialog
      :title.sync="dialogConfig.title"
      :visible.sync="dialogConfig.showDialog"
      @close="closeDialog(dialogConfig)"
      width="65%"
    >
      <el-form
        ref="dialogForm"
        :model="dialogConfig.formData"
        :rules="dialogConfig.action === 'view' ? {} : dialogConfig.rules"
        size="small"
        label-width="140px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="pageName">
              <el-input v-model="dialogConfig.formData.pageName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单别名" prop="alias">
              <el-input v-model="dialogConfig.formData.alias" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单描述" prop="description">
              <el-input
                v-model="dialogConfig.formData.description"
                type="textarea"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外部链接菜单" prop="externalFlag">
              <DictSelect
                v-model="dialogConfig.formData.externalFlag"
                :defaultOptions="options.whether"
                placeholder="请选择"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单页面URL" prop="path">
              <el-input v-model="dialogConfig.formData.path" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否快捷菜单" prop="quickFlag">
              <DictSelect
                v-model="dialogConfig.formData.quickFlag"
                :defaultOptions="options.whether"
                placeholder="请选择"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标" prop="icon">
              <Upload v-model="dialogConfig.formData.icon" ref="uploadComp" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快捷菜单图标" prop="quickIcon">
              <Upload v-model="dialogConfig.formData.icon" ref="quickIcon" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sortNo">
              <el-input-number
                v-model="dialogConfig.formData.sortNo"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="buttons" v-if="dialogConfig.action !== 'view'">
        <template>
          <el-button @click="closeDialog(dialogConfig)"> 取消 </el-button>
          <el-button type="primary" @click="handlerSubmit"> 提交 </el-button>
        </template>
      </span>
      <span slot="buttons" v-else>
        <template>
          <el-button @click="closeDialog(dialogConfig)">返回</el-button>
        </template>
      </span>
    </edu-dialog>
  </div>
</template>

<script>
import utils from "@/utils";
import mixins from "@/mixins";

import { queryPageTree, updatePage } from "@/api/menus";
import { queryAllPageTree } from "@/api/common";

export default {
  mixins: [mixins],
  components: {},
  data() {
    return {
      tabPosition: "100000001", //默认菜单组
      menuList: [],
      loading: false,
      defaultProps: {
        children: "subPageList",
        label: "pageName",
      },
      dialogConfig: {
        title: "",
        showDialog: false,
        action: "add",
        formData: {},
        rules: {},
        fileList: [],
      },
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    async initOptions() {
      this.queryTree();
    },
    // 查询树
    async queryTree() {
      this.loading = true;
      // let { returnObj } = await queryPageTree([this.tabPosition]);
      let { returnObj } = await queryAllPageTree({
        pageType: "entry", // 菜单类型，entry：菜单，privilege：按钮，非必填，精确匹配
        systemId: this.tabPosition, // 子系统编号，100000001：PC后台，100000002：APP   ，非必填，精确匹配
      });
      this.loading = false;
      this.menuList = returnObj;

      this.$nextTick(() => {
        // this.$refs.tree.filter("entry");
      });
    },
    filterNode(value, data, node) {
      return data.pageType == value;
    },
    // 菜单组切换
    radioChange() {
      this.queryTree();
    },
    // 修改
    async edit(node, data) {
      let { data: row } = node;
      this.dialogConfig.title = "编辑";
      this.dialogConfig.action = "edit";

      this.dialogConfig.formData = utils.clone({
        alias: row.alias, // 菜单别名（预留字段，也可以用作保存权限码）
        component: row.component, // 菜单组件路径（预留字段，视前端实现方式保留）
        description: row.description || "", // 菜单描述
        externalFlag: row.externalFlag, // 是否外部链接菜单，0：不是外部链接，1：是外部链接，默认不是外部链接
        icon: row.icon, // 菜单图标
        pageId: row.pageId, // 菜单编号
        pageName: row.pageName, // 菜单名称
        path: row.path, // 菜单页面URL
        quickFlag: row.quickFlag, // 是否快捷菜单，0：不是快捷菜单，1：是快捷菜单，默认不是快捷菜单
        quickIcon: row.quickIcon, // 快捷菜单图标
        sortNo: row.sortNo, // 菜单排序
      });

      this.openDialog(this.dialogConfig);
    },
    // 编辑提交
    handlerSubmit() {
      let params = {
        ...this.dialogConfig.formData,
      };
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          updatePage(params).then((res) => {
            this.$message({
              type: "success",
              message: "成功",
            });
            this.closeDialog(this.dialogConfig);
            this.queryTree();
          });
        }
      });
    },
    closeDialog(dialog) {
      dialog.showDialog = false;
      this.$refs["dialogForm"].resetFields();
    },
    openDialog(dialog) {
      dialog.showDialog = true;
    },
    // 查看
    view() {
      this.dialogConfig.title = "查看";
      this.dialogConfig.action = "view";
      this.openDialog(this.dialogConfig);
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
